<script setup lang="ts">

import { ref } from 'vue';
import {userLogin} from "@/Network/userApi";
import router from "@/Router";

let username = ref(localStorage.getItem("userId")?localStorage.getItem("username"):null)
let password = ref(localStorage.getItem("userId")?localStorage.getItem("password"):null)
//可以增加一个导入上次填写的按钮
const login = () => {
  if(username.value == ''|| password.value == ''){
    alert("用户名或者密码不能为空喔")
  }else{
    let userTemp={
      "username": username.value,
      "password": password.value,
    }
    userLogin(userTemp).then(res=>{
      console.log(res.data)
      if(res.data !="-1"){
        localStorage.setItem("userId",res.data)
        //便于 免密登录
        localStorage.setItem("username",username.value)
        localStorage.setItem("password",password.value)
        alert("登录成功，即将跳转")
        router.push("/recommend")
      }else{
        alert("用户名或者密码输错了喔")
      }
    })
  }

}

function register(){
  router.push("/register")
}
</script>

<template>
<!--  <div class="w-full min-h-screen flex justify-center items-center bg-cover bg-no-repeat" style="background-image: url('your-background-image.jpg');"> -->
  <div class="w-full min-h-screen flex justify-center items-center bg-cover bg-no-repeat bg-gray-2">
    <div class="relative py-12 px-8 sm:px-12 shadow-md flex flex-col items-center bg-white border-white border-5 shadow-xl"
         style="max-width: 480px; width: 100%;">
      <h1 class="text-4xl font-black text-#5d5e5e mt-[-15px] mb-8">登 录</h1>
      <label for="username" class="self-start mb-3 text-xl font-bold text-#5d5e5e ">请输入用户名：</label>
      <input id="username" class="mb-5 p-4 border-2 border-gray-300 w-full text-lg font-semibold text-gray-700 focus:outline-none rounded-xl"
             v-model="username"
             type="text"
             placeholder="请输入用户名：">
      <label for="password" class="self-start mb-3 text-xl font-bold text-#5d5e5e rounded-xl">请输入密码：</label>
      <input id="password" class="mb-5 p-4 border-2 border-gray-300 w-full text-lg font-semibold text-gray-700 focus:outline-none"
             v-model="password"
             type="password"
             placeholder="请输入密码：">
      <button class="w-full py-3 bg-yellow-200 text-2xl font-bold text-gray-5 rounded-2xl hover:bg-yellow-500 z-99 hover:text-white"
              @click="login">登 录</button>
<!--      <p class="mt-5 text-lg font-semibold text-#5d5e5e">还没有账号吗？注册一个吧！</p>-->
      <button
          class="mt-5 text-lg font-semibold text-#5d5e5e bg-transparent border-none cursor-pointer hover:underline focus:outline-none z-99"
          @click="register"
      >
        还没有账号吗？注册一个吧！
      </button>
    </div>
  </div>
</template>

<style scoped>
</style>


<style scoped>

</style>